<template>
  <view>
    <view>
      <!-- 筛选 -->
      <view class="filter">
        <text class="active">综合</text>
        <text>销量</text>
        <text>价格</text>
      </view>
      <!-- 没有商品时状态的显示与隐藏 -->
      <view v-if="loaded && !goodsList.length" class="tips">没有找到相关商品~</view>
      <!-- 商品列表 -->
      <scroll-view v-else class="goods" scroll-y @scrolltolower="eventhandle">
        <view class="item" @click="goDetail(item.goods_id)" v-for="(item,index) in goodsList" :key="index">
          <!-- 商品图片 -->
          <image class="pic" :src="item.goods_small_logo" />
          <!-- 商品信息 -->
          <view class="meta">
            <view class="name">{{item.goods_name}}</view>
            <view class="price">
              <text>￥</text>
              {{item.goods_price}}
              <text>.00</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: "goodsList",
  data() {
    return {
      goodsList: [], //列表数据
      pagesize: 10, //每页显示的条数
      query: "", // 查询关键词
      cid: null, // 分类ID  可选
      pagenum: 1, // 当前的页码
      total: 0, //数据的总条数
      loaded: false, //没有商品时状态的显示与隐藏
    };
  },
  onLoad(e) {
    console.log(e.query, 111);
    this.query = e.query;
    // 发送请求
    this.getGoodsData();
  },

  methods: {
    goDetail(id) {
      uni.navigateTo({
        url: "/pages/goods/index?query="+id,
      });
    },
    // 获取商品列表
    async getGoodsData() {
      const { data: res } = await this.http({
        url: "/api/public/v1/goods/search",
        data: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        },
      });

      this.goodsList.push(...res.message.goods);
      if (res.message.goods.length == 0) this.loaded = true;
      console.log(res, 666);
      // 赋值当前页
      this.pagenum = res.message.pagenum;
      // 赋值总条数
      this.total = res.message.total;
    },

    // 监听页面滚动是否快到达底部了
    eventhandle(e) {
      console.log(e,99);
      // 判断当前的数据与总数据的对比，是否还能请求到数据
      if (this.goodsList.length == this.total)
        return uni.showToast({ title: "没有更多了", mask: true });
      // 当好可以请求数据时，让页码加1，然后在发送请求
      this.pagenum++;
      // 发送请求
      this.getGoodsData();
    },
  },
};
</script>

<style scoped lang="scss">
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
